<%@include file="/WEB-INF/common/taglibs.jsp"%>
<script type="text/javascript" src="${ctx}/resources/js/datatable-query.js"></script>

<style>
.ui-draggable-dragging {
	z-index : 10000
}
</style>

<script>
$(document).ready(function () {
	
	 $(".droppable").droppable({
		  drop: function( event, ui ) {
			  var obj = $(ui.draggable[0]).find("span.icomoon-icon-move");
				var id = obj.attr("entityId");
				var name = obj.attr("entityName");
					$(this).append($('<option>', {
				    value: id,
				    selected : 'selected',
				    text: name
				}));
		  }
	 	})
	
	johnny.oTable = $('.ajaxTable').dataTable({
		"bLengthChange": true,
		"sAjaxSource": '${ctx}/admin/shop-product',
		"aoColumnDefs": [
			       		  { 'bSortable': false, 'aTargets': [0] }
			       		],
      	 "fnDrawCallback": function( oSettings ) {
      		 
      	   $(".icomoon-icon-move").parents("tr").draggable({
   	        opacity: 0.6,
       	    zIndex : 1000,
       		helper: 'clone',
       		 
      	    });
 
			 },
		"fnInitComplete": function (oSettings, json) { }
	});
	var name = $("<input>").attr({
		type: "text",
		field: "name",
		op: "cn",
		placeholder: "Name",
		class: "filterdata"
	});
	johnny.initTableQuery(name);
    });
 
var columnHeader = ['','name', 'imageUrl'];
var QueryData = function (aoData) {
	return johnny.initQueryData(aoData, columnHeader);
}

var DataTableForm = function (json, echo) {
	var dataArray = new Array();
	for (var i = 0; i < json.result.length; i++) {
		var subArray = new Array();
		var value = '<span class="icon12 span12 icomoon-icon-move" entityId="'+json.result[i].id+'" entityName="'+json.result[i].name+'"></span>';
 		subArray.push(value);
		subArray.push(json.result[i].name);
		subArray.push(johnny.getImageHtml(json.result[i].imageURL));
 		dataArray.push(subArray);
	}
	return {
		sEcho: echo,
		iTotalRecords: json.totalCount,
		iTotalDisplayRecords: json.totalCount,
		aaData: dataArray
	};
}
</script>
<script>
$(document).ready(function(){
	$("form.form-horizontal.seperator[method='post']").validate();
	
});
	
	
 </script>
<div class="row-fluid">

	<div class="span12">

		<div class="page-header">
			<h4>Product Box </h4>
		</div>

<form class="form-horizontal seperator" method="post">
<!--name --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span3" for="name">Name :</label><input class="span4" id="name" name="name"   type="text" value="${entity.name}" /></div></div></div>
<!--orderRank --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span3" for="orderRank">Order Rank :</label><input class="span4" id="orderRank" name="orderRank"   type="text" value="${entity.orderRank}" /></div></div></div>
     <div class="form-row row-fluid">
                                            <div class="span12">
                                                <div class="row-fluid">
                                                    <label class="form-label span3" for="checkboxes">Simple Multiselect</label>
                                                    <div class="span9 controls">   
								 					   <select name="entityId" class="nostyle droppable" multiple="multiple" >
															<c:forEach var="single" items="${entity.products}">
																<option selected="selected" value="${single.id}"  > ${single.name }</option>
 															</c:forEach>					
                                                        </select>
                                                    </div> 
                                                </div>
                                            </div> 
                                        </div>



 <div class="form-row row-fluid">
				<div class="span12">
					<div class="row-fluid">
						<div class="form-actions">
							<div class="span3"></div>
							<div class="span4 controls">
								<button type="submit" class="btn btn-info marginR10">Save
									changes</button>
								<button class="btn btn-danger">Cancel</button>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			
			
			
		</form>
<div class="row-fluid">
<div class="span12">
<div class="box gradient">
<div class="title">
<h4><span>Product </span>

</h4>
<a href="#" class="minimize">Minimize</a></div>
<div class="content scrollable clearfix">
<table class="ajaxTable display table table-bordered">
	<thead>
		<tr>
			<th><a id="select_all"><span class="icomoon-icon-checkmark-2"></span></a></th>
 			<th>Title</th>
			<th>Image</th>
 		</tr>
	</thead>
</table>
</div>
</div>

</div>
</div>
	</div>
	<!-- End .span12 -->

</div>
<!-- End .row-fluid --> 

